<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar1 :title="titleHeader"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content">
			<view class="ticketInfo">
				<view class="name">
					{{jointName}}
				</view>
				<view class="date">
					<text>游玩日期</text>
					<text>{{playDate}}</text>
				</view>
			</view>
			<view class="voucherCode">
				<view class="codeList2">
					<view class="title">游客信息</view>
					<view class="listItem" v-for="(item,index) in ticketList" :key="index">
						<view class="codeList_left">
							<view class="name">
								{{item.passName}}
							</view>
							<view class="l2">
								<text style="margin-left: 20rpx;margin-right: 10rpx;">{{personCardCfg[item.credentialType]||'证件号'}}</text> {{item.credentialNum}}
							</view>
						</view>
						<view class="codeList_right">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<!-- 手续费 -->
			<view class="sxf">
				预计扣除手续费￥{{totalRefundCharge}}
			</view>
			<view class="cancelReason">
				<view class="title">
					退款原因
				</view>
				<view>
					<u-radio-group v-model="checkboxValue" placement="column" iconPlacement="right" @change="change">
						<u-radio :customStyle="{padding: '28rpx 0rpx',borderBottom:'1px solid #eee',background:'#fff'}"
							v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name" shape="circle"
							activeColor="#007A69"
							size="36" labelSize="28" icon-size="22">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<bottomBar btnName='确认退票' priceName='预计退款' :price='realityPay' @confirmCancel='confirmCancel()'>、
		</bottomBar>
		<!-- 确认申请退票弹窗 -->
		<u-popup :show="confirmCancelShow" @close="confirmCancelShow=false" customStyle="border-radius:24rpx 24rpx 0 0">
			<view class="feeDetail">
				<view class="tit">
					<text>申请退票</text>
					<u-icon name="close-circle" size="40" color="#999" @click="confirmCancelShow=false"></u-icon>
				</view>
				<view class="list">
					<view class="item">
						<view class="top">
							您确定要退票吗？确认申请退票将不可撤回，再次购买可能会因为无票，影响您的游玩行程！
						</view>
						<view class="sum">
							<text>退款金额</text>
							<text>￥{{realityPay}}</text>
						</view>
						<text class="note">退款预计1-7个工作日原路退回，请耐心等待</text>
						<view class="btn">
							<u-button @click="confirmCancelShow=false" size="large">我在想想</u-button>
							<u-button type="primary" size="large" @click="confirmRefund()"> 确定申请</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import bottomBar from '@/compoments/bottomBar/index.vue'
	export default {
		components: {
			bottomBar
		},
		data() {
			return {
				ticketList: [],
				jointName: '',
				playDate: '',
				orderCode: '',
				realityPay: 0,
				time: '',
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '申请退票退款',
				confirmCancelShow: false,
				price: 109,
				checkboxValue: '',
				cancelStatus: false,
				myList: {
					spotList: {},
					isScenicTicketDTOList: {
						scenicName: '六合朝阳景区',
						spotAddress: '舟山市嵊泗县五龙乡',
					},
					useStatus: 1,
					scenicName: '沈家湾-嵊泗船票单程+六合朝阳景区门票',
					ticketList: [],
					num: 2,

				},
				show: false,
				pickFlag: false,
				checkboxList: [{
						name: "购票错误",
					}, {
						name: "线路不匹配"
					},
					{
						name: "态度不好"
					},
					{
						name: "价格不合理"
					},
					{
						name: "日期不对"
					},
					{
						name: "取消行程"
					},
					{
						name: "重复购买"
					}, {
						name: "其他原因"
					},
				],
				refund: {
					refundReason: '',
					orderCode: ''
				},
				totalRefundCharge:0
			}
		},
		onLoad(option) {
			this.orderId = option.orderCode
			uni.$once('sendData', info => {
				this.getRefundInfo(info.id);
				this.jointName = info.jointName;
				this.playDate = info.scenicOrderMap.playDate;
				this.ticketList = info.isShipOrderListDTO.detailDTOList;
				this.ticketList.forEach((t,i)=>{
					let _t = info.scenicOrderMap.ticketList.find(s=>s.idCode==t.credentialNum);
					t.price = (parseFloat(t.realFee)||0)+(parseFloat(_t?_t.ticketPrice:0)||0)
				})
				this.orderCode = info.orderCode
				this.time = info.orderTime;
				this.refund.orderCode = this.orderCode;
			})
			uni.$emit('toSendData');
		},
		onUnload() {
			uni.$off('sendData');
		},
		methods: {
			getRefundInfo(id,info){
				this.$api.get('/api/shipScenic/wouldRefund/' + id).then(res => {
					if (res.data.code === 0) {
						this.totalRefundCharge = res.data.data.totalRefundCharge||0;
						this.realityPay = res.data.data.totalRefundFee||0;
					} else this.$showModal(res.data.msg)
				})
			},
			//退款
			confirmRefund() {
				this.$api.get('/api/shipScenic/quitOrder', this.refund).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '申请退款成功！请留意手机到账提醒！'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
					setTimeout(() => {
						uni.redirectTo({
							url: '/pagesMy/order/index?name=船票+景点&type=0&typeIndex=4'
						})
					}, 1500)
				})

			},
			confirmCancel() {
				if (!this.refund.refundReason) {
					uni.showToast({
						title: '请填写退款原因',
						icon: 'error',

					})
					return
				}
				this.confirmCancelShow = true
			},
			change() {
				this.refund.refundReason = this.checkboxValue
			},
			radioChange: function(evt) {
				var items = this.checkboxList,
					values = evt.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
						this.refund.refundReason = values
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			//复制订单号
			copyOrderId() {
				uni.setClipboardData({
					data: this.orderCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio__text{
		color:#333!important;
		font-size: 28rpx!important;
	}
	page {
		background-color: #F5F8FA;


		.content {
			position: relative;
			padding: 10rpx 24rpx;
			z-index: 3;
			padding-bottom: 160rpx;

			.sxf {
				margin: 30rpx 0 42rpx;
				color: #FF7D01;
				font-size: 28rpx;
				line-height: 28rpx;
				width: 100%;
				padding-left: 24rpx;
				box-sizing: border-box;
			}

		}
	}

	.page {
		background-color: #F5F8FA;
	}


	.cancelReason {
		margin: 20rpx 0;
		padding: 0 24rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.title {
			padding: 40rpx 0 10rpx;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.redioGroup {
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 30rpx 0 10rpx;
			border-bottom: 1rpx solid #EFEFEF;
			font-size: 14px;
			line-height: 14px;

		}
	}

	.cancelRole {
		margin: 23rpx 20rpx;

		padding: 10rpx 24rpx 20rpx;

		border-radius: 20rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			align-items: center;


			&_left {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
			}

			&_right {
				display: flex;
				flex-direction: row;
				color: #777777;
				line-height: 30rpx;
				align-items: center;
			}
		}

		.checkBoxItem {
			display: flex;
			justify-content: space-between;

			align-items: center;

			&_left {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				width: 100%;
				border-bottom: 0.5rpx solid #efefef;
				align-items: center;
				padding: 20rpx 17rpx;

				.info {
					display: flex;
					flex-direction: column;
					color: #777777;

					.name {
						color: #333;
						font-weight: 500;
						font-size: 34rpx;
						margin: 20rpx 0;

						.ticketType {
							margin-left: 20rpx;
							font-weight: 400;
							color: #94A9C8;
							line-height: 33rpx;
							height: 33rpx;
							font-size: 24rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;
						}
					}

				}

				.price {
					color: red;
					font-size: 26rpx;

				}
			}

			&_right {
				color: #777777;
				line-height: 30rpx;
			}
		}
	}




	.bg {
		height: 640rpx;
		top:0;
		position: fixed;
		z-index: 1;
		width: 100%;
		margin-top: -1px;
		background: linear-gradient(to bottom, #007A69, #007A69,#F5F8FA);
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 16rpx;
		padding-bottom: 20rpx;

		.cell {
			display: flex;
			justify-content: space-between;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #999;
			width: 112rpx;
		}

		.icon {
			font-size: 28rpx;
			color: #999;

		}

		.val {
			font-size: 28rpx;
			padding-left: 56rpx;
			color: #333;

			.copy {
				color: #007A69;
				border: #007A69 1rpx solid;
				width: 70rpx;
				height: 32rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
				display: inline-block;
				text-align: center;
				line-height: 32rpx;
				margin-left: 30rpx;
			}
		}
	}

	//购票凭证
	.voucherCode {
		margin: 20rpx 0;
		padding: 0 24rpx;
		border-radius: 16rpx;
		background-color: #fff;
		z-index: 2;

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding: 40rpx 0 30rpx 0;
		}


		//游客信息
		.codeList2 {

			.listItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.codeList_left {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					border-top: 1rpx solid #EFEFEF;
					// &:last-child{
					// 	border: none;
					// }

					.name {
						font-size: 32rpx;
						color: #333;
						line-height: 42rpx;

						.ticketType {
							margin-left: 18rpx;
							font-weight: 400;
							color: #808080;
							line-height: 15px;
							height: 36rpx;
							font-size: 20rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;
							display: inline-block;
							box-sizing: border-box;

						}
					}

					.l2 {
						font-size: 26rpx;
						color: #333;

					}

				}
				.codeList_right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #111111;
				}
			}
		}

	}

	.orange {
		color: #FF7D01;
		margin-left: 30rpx;
		font-size: 26rpx;
	}

	.ticketInfo {
		padding: 36rpx 24rpx 0;
		border-radius: 16rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;
		height: 176rpx;
		box-sizing: border-box;

		.name {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.date {
			margin-bottom: 24rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}
			}
		}
	}

	.code {
		margin-top: 40rpx;
		text-align: center;
		position: relative;

		.cover,
		.sx {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			width: 340rpx;
			height: 340rpx;
			top: 66rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sx {
			width: 120rpx;
			height: 120rpx;
			top: 150rpx;
			background: transparent;
		}

		.txt {
			font-size: 28rpx;
		}

		image {
			width: 340rpx;
			height: 340rpx;
			margin: 30rpx 0;
		}
	}

	//头部样式
	.head {
		padding: 40rpx 40rpx 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.t_left {
			text {
				font-size: 44rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.t_right {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				text {
					font-size: 44rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					margin-left: 4rpx;
				}
			}

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

	}

	.btns {
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 16rpx 30rpx 44rpx 30rpx;
		background-color: #fff;
		gap: 0 30rpx;
		width: 750rpx;
		box-sizing: border-box;

		.b_ {
			width: 100rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			color: #333;
			text-align: center;
			background-color: #F6F6F6;

			&:last-child {
				background-color: #007A69;
				color: #fff;
			}
		}
	}

	// 费用明细
	.feeDetail {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		height: 600rpx;
		overflow: auto;
		padding: 50rpx 30rpx;
		border-bottom: 1px solid #eee;

		.tit {
			display: flex;
			font-weight: bold;
			margin-bottom: 64rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #333;
				width: 92%;
				text-align: center;
			}
		}

		.list {
			vertical-align: middle;

			.top {
				font-size: 30rpx;
				color: #666;
				line-height: 42rpx;
			}

			.sum {
				display: flex;
				justify-content: space-between;
				color: #333333;
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 5rpx;
				align-items: center;
				padding: 0 34rpx;
				margin: 40rpx 0 24rpx 0;
				font-size: 30rpx;

				text:nth-child(2) {
					font-weight: bold;
					color: #FF4141;
				}
			}

			.note {
				height: 24rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;

			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-top: 144rpx;
				gap: 30rpx;
				font-weight: bold;



			}

		}
	}

	/deep/.u-button--large.data-v-2bf0e569 {
		width: 282rpx;
		font-size: 27rpx;

	}
</style>